<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Book</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                background-color: #caf0f6;

            }

            .book-perspective {
                perspective: 800px;
                transform-style: preserve-3d;
            }

            .book {
                position: relative;
                width: 206px;
                height: 256px;
                margin: 0 15px;
                transform: rotateZ(-10deg) rotateX(15deg) translateZ(-100px);
                transform-origin: center;
                transition: transform 0.2s;
                cursor: pointer;
            }

            .book:hover {
                transform: none;
            }

            .book:hover .book-coverback {
                left: -1px;
                box-shadow: 0 50px 40px -20px #727272a6;
            }

            .book:hover .book-coverback::after {
                animation: BAR 1s linear infinite;
                width: 70%;
            }

            .book:hover .book-lock {
                width: 41px;
            }

            .book > div {
                width: 200px;
                height: 240px;
                position: absolute;
                border-radius: 10px 20px 20px 10px;
                border: 3px solid currentColor;
            }

            .book-cover {
                z-index: 1;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                box-shadow: 0 0 4px 1px currentColor inset;
            }

            .book > .book-coverback {
                height: 245px;
                top: 5px;
                left: -2px;
                transition: all 0.2s;
                background-color: #fff;
                overflow: hidden;
                box-shadow: 0 0 10px -5px #000000;
            }

            .book-coverback::after {
                content: " ";
                background-image: linear-gradient(-45deg, #b0d88f, #b0d88f 25%, #85c763 25%, #85c763 50%, #b0d88f 50%, #b0d88f 75%, #85c763 75%, #85c763);
                width: 10%;
                height: 20px;
                display: block;
                background-size: 20px 20px;
                bottom: -1px;
                position: absolute;
                transition: all 2s;
            }

            @keyframes BAR {
                from {
                    background-position: 0 0;
                }

                to {
                    background-position: -20px 0;
                }
            }

            .book-lock {
                height: 19px;
                width: 40px;
                background-color: currentColor;
                display: block;
                position: absolute;
                z-index: 2;
                right: 0;
                bottom: 60px;
                border-radius: 2px 0 0 2px;
                box-shadow: 0 3px 5px -2px currentColor;
                transition: all 0.2s
            }

            .book-triangle {
                width: 15px;
                height: 15px;
                border-radius: 2px;
                overflow: hidden;
                display: block;
                position: absolute;
                left: -6px;
                top: 2px;
                transform: rotateZ(-45deg) scale(0.95);
            }

            .book-triangle::after {
                display: block;
                content: " ";
                width: 20px;
                height: 20px;
                background-color: currentColor;
                left: -10px;
                top: -10px;
                position: relative;
                transform: rotateZ(45deg);
            }

            .book-price {
                font-size: 10px;
                line-height: 19px;
                color: #fff;
                vertical-align: text-top;
                font-weight: bolder;
            }
        </style>
    </head>

    <body>
        <div class="book-perspective">
            <div class="book" style="color:#06319c">
                <div class="book-cover" style="background-image: url(iphone_2145.jpg);"></div>
                <div class="book-coverback"></div>
                <span class="book-lock">
                    <span class="book-triangle"></span>
                    <span class="book-price">￥56.5</span>
                </span>
            </div>
        </div>
        <div class="book-perspective">
            <div class="book" style="color:#db570b">
                <div class="book-cover" style="background-image: url(iphone_2139.jpg);"></div>
                <div class="book-coverback"></div>
                <span class="book-lock">
                    <span class="book-triangle"></span>
                    <span class="book-price">￥32.5</span>
                </span>
            </div>
        </div>
        <div class="book-perspective">
            <div class="book" style="color:#1877a3">
                <div class="book-cover" style="background-image: url(iphone_2125.jpg);"></div>
                <div class="book-coverback"></div>
                <span class="book-lock">
                    <span class="book-triangle"></span>
                    <span class="book-price">￥32.5</span>
                </span>
            </div>
        </div>
    </body>

</html>
